<template>
   <ul class="dataNums inrow">
      <li class="dataOne" v-for="item in digitArray">
          <div class="dataBoc" ref="dataBoc">
            <div class="tt" t="38" ref="tt">
              <span class="num0">0</span>
              <span class="num1">1</span>
              <span class="num2">2</span>
              <span class="num3">3</span>
              <span class="num4">4</span>
              <span class="num5">5</span>
              <span class="num6">6</span>
              <span class="num7">7</span>
              <span class="num8">8</span>
              <span class="num9">9</span>
              <span class="num0">0</span>
              <span class="num1">1</span>
              <span class="num2">2</span>
              <span class="num3">3</span>
              <span class="num4">4</span>
              <span class="num5">5</span>
              <span class="num6">6</span>
              <span class="num7">7</span>
              <span class="num8">8</span>
              <span class="num9">9</span>
            </div>
          </div>
      </li>
   </ul>
</template>

<script>
export default {
  name: 'ScrollNum',
  props:{
    deVal: 0, //传入值
    digit: 5 //默认显示几位数字
  },
  data() {
    return {
      digitArray:[]
    }
  },
  watch:{
    deVal:function(newVal,oldVal){
      this.deVal=newVal;
      var valLen = (this.deVal + '').length||this.digit;
      for(var i=0;i<valLen;i++){
        this.digitArray.push(i);
      }
      this.$nextTick(function () {
           this.scroNum();
      })
    }
  },
  mounted(){
    var valLen = this.digit || (this.deVal + '').length;
    for(var i=0;i<valLen;i++){
      this.digitArray.push(i);
    }
    console.dir(this.deVal);
    this.$nextTick(function () {
    		// Code that will run only after the
    		// entire view has been rendered
         this.scroNum();
    })
  },
  methods: {
    scroNum(){
      var number = this.deVal;
      var $num_item = this.$refs.tt;
      //var h = this.$refs.dataBoc.style.height;
      var h=34;
      $num_item.forEach(function(item, i) {
        item.style.transition="all 2s ease-in-out";
      });
      var numberStr = number.toString();
      if(numberStr.length <= $num_item.length - 1) {
      	var tempStr = '';
      	for(var a = 0; a < $num_item.length - numberStr.length; a++) {
      		tempStr += '0';
      	}
      	numberStr = tempStr + numberStr;
        console.dir(numberStr)
      }

      var numberArr = numberStr.split('');
      $num_item.forEach(function(item, i) {
      	setTimeout(function() {
          console.dir(numberArr[i]);
      		item.style.top=-parseInt(numberArr[i]) * h - h * 10+ 'px';
      	}, i * 100)
      });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
   ul,li{ margin:0px;padding:0px;}
  .dataNums {
    position: absolute;
    top: 0;
    display: inline-block;
    height: 30px;
  }

  .dataNums .dataOne {
    width: 28px;
    height: 34px;
    text-align: center;
    margin-right: 5px;
  }

  .dataNums .dataBoc {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .inrow>li,
  .inrow span {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 14px;
    letter-spacing: normal;
    word-spacing: normal;
  }
  .dataNums .dataBoc .tt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .dataNums .dataBoc .tt span {
    width: 100%;
    height: 100%;
    text-indent: -99px;
  }
  .dataNums .dataBoc .tt span.num0 {
    background: url(../../images/data-nums/0.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num1 {
    background: url(../../images/data-nums/1.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num2 {
    background: url(../../images/data-nums/2.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num3 {
    background: url(../../images/data-nums/3.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num4 {
    background: url(../../images/data-nums/4.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num5 {
    background: url(../../images/data-nums/5.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num6 {
    background: url(../../images/data-nums/6.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num7 {
    background: url(../../images/data-nums/7.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num8 {
    background: url(../../images/data-nums/8.png) center no-repeat;
  }
  .dataNums .dataBoc .tt span.num9 {
    background: url(../../images/data-nums/9.png) center no-repeat;
  }
</style>
